<template>
  <div class="box">
    <div class="item1 flex">
      <div style="width: 50%; height: 16.2vh">
        <PIE v-if="pieData.list" :data="pieData" />
      </div>
      <div style="width: 50%; height: 15vh; overflow: hidden; padding-bottom: 1vh">
        <div class="rectangle1 flex">
          <div class="p-l-2" :class="online ? 'active' : ''" @click="online = 1">
            在线
          </div>
          <div class="p-r-2" :class="!online ? 'active' : ''" @click="online = 0">
            离线
          </div>
        </div>

        <div>
          <LISTTABLE
            :topData="todata"
            @loadingMore="loadingMore"
            :list="list"
            style="margin-top: 2vh; height: 13vh"
          />
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div style="width: 100%; height: 12.87vh">
      <COMZX :title="'告警信息统计'" :list="comzxlist" v-if="comzxlist.length" />
    </div>
    <el-divider></el-divider>
    <div class="item1 flex">
      <div style="width: 50%; height: 16.2vh">
        <PIE v-if="pieData1.list" :data="pieData1" />
      </div>
      <div style="width: 50%; height: 16vh; overflow: hidden; padding-bottom: 1vh">
        <div>
          <LISTTABLE
            :topData="dangerdata"
            @loadingMore="loadingMore1"
            :list="list1"
            style="margin-top: 2vh; height: 13vh"
          />
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="flex flex_center">
        <div class="text">无人机告警</div>
        <div class="flex rect flex_center">
          <div
            class="rectangle_copy"
            :class="wctive == 0 ? 'wctive' : ''"
            @click="changePlaneData(0)"
          >
            石化路与苏海路交叉管廊
          </div>
          <div
            class="rectangle_copy"
            :class="wctive == 1 ? 'wctive' : ''"
            @click="changePlaneData(1)"
          >
            重型化工消防站楼顶
          </div>
        </div>
      </div>
      <div class="flex">
        <TIPS :title="'今日拦截次数'" :data="planeData.todayAntiTimes || 0" />
        <TIPS :title="'累计发行无人机'" :data="planeData.totalDroneDev || 0" />
        <TIPS :title="'今日入侵架次'" :data="planeData.todayIntruTimes || 0" />
        <TIPS :title="'累计拦截次数'" :data="planeData.totalIntruTimes || 0" /><TIPS
          :title="'白名单'"
          :data="planeData.totalWhitelistDev || 0"
        />
      </div>
      <div style="padding: 1vh 0 1.5vh 0; overflow: hidden">
        <LISTTABLE
          style="height: 11vh"
          :topData="pData"
          @loadingMore="loadingMore"
          :list="pDataList"
          :loadstatus="false"
        />
      </div>
    </div>
  </div>
</template>
<script>
import PIE from "components/echarts/Pie";
import TIPS from "components/tips";
import {
  camerastats,
  camerastatslist,
  alarmstatline,
  jimialarmpie,
  jimialarmlist,
  uav,
  uav2,
  uavhistory,
  uav2history,
} from "api/zyy";
import LISTTABLE from "components/listable/index";
import COMZX from "components/echarts/Companyzx";
export default {
  name: "alarmControl",
  components: {
    PIE,
    TIPS,
    LISTTABLE,
    COMZX,
  },
  data() {
    return {
      online: 1,
      pieData: {},
      pieData1: {},
      tabPosition: "online",
      todata: [
        {
          name: "名称",
          deindex: "name",
        },
        {
          name: "位置",
          deindex: "location",
        },
        {
          name: "状态",
          deindex: "online",
          callBack: function (item, n) {
            return item.online ? "在线" : "离线";
          },
        },
      ],
      dangerdata: [
        {
          name: "告警时间",
          deindex: "alarm_time",
        },
        {
          name: "车牌号",
          deindex: "device_name",
        },
        {
          name: "告警类型",
          deindex: "alarm_name",
          text: true,
        },
      ],
      pData: [
        {
          name: "设别码",
          deindex: "objId",
        },
        {
          name: "名称",
          deindex: "site",
        },
        {
          name: "开始时间",
          deindex: "iStartTime",
          text: true,
          callBack: function (n, i) {
            var sdate, s, t;
            if (n.iStartDate) {
              sdate = n.iStartDate + "";
              s = sdate.substring(4);
              t = s.substring(0, 2) + "." + s.substring(2);
            } else {
              t = "";
            }

            var time, stime;
            if (n.iStartTime) {
              time = (n.iStartTime + "").substring(0, 4);
              stime = time.substring(0, 2) + ":" + time.substring(2);
            } else {
              stime = "";
            }
            return t + " " + stime;
          },
        },
        {
          name: "结束时间",
          deindex: "iStopDate",
          text: true,
          callBack: function (n) {
            var sdate, s, t;
            if (n.iStopDate) {
              sdate = n.iStopDate + "";
              s = sdate.substring(4);
              t = s.substring(0, 2) + "." + s.substring(2);
            } else {
              t = "";
            }
            var time, stime;
            if (n.iStopTime) {
              time = (n.iStopTime + "").substring(0, 4);
              stime = time.substring(0, 2) + ":" + time.substring(2);
            } else {
              stime = "";
            }

            return t + " " + stime;
          },
        },
      ],
      list: [],
      list1: [],
      page: 1,
      page1: 1,
      pageuav: 1,
      pageuav1: 1,
      comzxlist: [],
      planeData: {},
      pDataList: [],
      wctive: 0,
    };
  },
  mounted() {
    this.getCamerastats();
    this.getCamerastatslist();
    this.getAlarmstatline();
    this.getJimialarmpie();
    this.getJimialarmlist();
    this.getUav();
    this.getUavhistory();
  },
  watch: {
    online(n, o) {
      this.pieData = [];
      this.list = [];
      this.page = 1;
      this.getCamerastats();
      this.getCamerastatslist();
    },
  },
  methods: {
    loadingMore() {
      this.page += 1;
      this.getCamerastatslist();
    },
    loadingMore1() {
      this.page1 += 1;
      this.getJimialarmlist();
    },
    async getCamerastats() {
      let res = await camerastats({
        online: this.online,
      });
      if (this.$iscode(res)) {
        const { data } = res;

        this.pieData = data;
      }
    },
    // 摄像头
    async getCamerastatslist() {
      let res = await camerastatslist({
        online: this.online,
        page: this.page,
        pageSize: 10,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;

        list.length && (this.list = this.list.concat(list));
      }
    },
    // 告警信息统计
    async getAlarmstatline() {
      let res = await alarmstatline();
      if (this.$iscode(res)) {
        const { data } = res;

        this.comzxlist.push(data);
      }
    },
    // 危化品车辆告警（饼状图）
    async getJimialarmpie() {
      let res = await jimialarmpie();
      if (this.$iscode(res)) {
        const {
          data: { list },
        } = res;
        this.pieData1.name = "危化品车辆告警";
        this.pieData1.list = list;
      }
    },
    async getJimialarmlist() {
      let res = await jimialarmlist({
        page: this.page1,
        pageSize: 5,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;

        list.length && (this.list1 = this.list1.concat(list));
      }
    },
    // 石化九路与素海璐交叉口管廊上
    async getUav() {
      let res = await uav();
      if (this.$iscode(res)) {
        const { data } = res;
        this.planeData = data;
      }
    },
    // 重型化工消防站楼顶
    async getUav2() {
      let res = await uav2();
      if (this.$iscode(res)) {
        const { data } = res;
        this.planeData = data;
      }
    },
    //石化九路与素海璐交叉口管廊上列表
    async getUavhistory() {
      let res = await uavhistory({
        page: this.pageuav,
        pageSize: 10,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.pDataList = list);
      }
    },
    // 重型化工消防站楼顶列表
    async getUav2history() {
      let res = await uav2history({
        page: this.pageuav1,
        pageSize: 10,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.pDataList = list);
      }
    },
    changePlaneData(n) {
      this.wctive = n;
      this.planeData = {};
      this.pDataList = [];
      if (n) {
        this.getUav2();
        this.getUav2history();
      } else {
        this.getUav();
        this.getUavhistory();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex_center {
  justify-items: center;
}
.box {
  height: 100%;
  margin-top: 0.6vh;
}
.rectangle1 {
  width: 2.2vw;
  margin: 0 0.2vw 0.6rem 0;
  height: 0.8vw;
  line-height: 0.8vw;
  text-align: right;
  border: solid 0.05vh #34a1ff;
  float: right;
}
.rectangle1 div {
  font-size: 0.45vw;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0vw;
  color: #fff;
  cursor: pointer;
}
.p-l-2 {
  margin-left: 0.2vw;
}
.p-r-2 {
  margin-right: 0.2;
}
.rectangle1 div.active {
  background-color: #206ebf !important;
}
.el-divider {
  background: #499be7;
  margin: 2vh 0;
}
.text {
  font-size: 23px;
}
.rect {
  height: 2.02vh;
  line-height: 1vh;
  background-color: #1d6bbd;
  border: solid 0.03vw #34a1ff;
  font-size: 0.56vh;
}
.rect div.rectangle_copy {
  padding: 0.5vh 0.5vh;
  background: rgb(15, 56, 96);
  cursor: pointer;
  font-size: 0.45vw;
}
.rect div.wctive {
  background: rgb(29, 107, 189);
}
</style>
